import { useState } from "react";
import { IconFont, PageWrapper } from "../../../components"
import "./index.scss";



interface ProductQuantityControlButtonProps {
  // 默认值
  value?: number;
  // 加
  increase?: (value: number) => void;
  // 减少
  subtract?: (value: number) => void;
  // 变化
  onChange?: (value: number) => void;
}


/**
 * 商品数量控制按钮
 * @param param0 
 * @returns 
 */
const ProductQuantityControlButton: React.FC<ProductQuantityControlButtonProps> = ({ value, increase, subtract, onChange }) => {
  const [quantityValue, setQuantityValue] = useState<number>(value || 0);

  // 数量切换事件
  const onQtyChange = (type: '+' | '-') => {
    if (type === '+') {
      setQuantityValue(quantityValue+1)
    }
    if (type === '-') {
      setQuantityValue(quantityValue-1)
    }
  }

  return <div className="product-qty__wrap">
    <div className="btn" onClick={() => onQtyChange('-')}>
      -
    </div>
    <h3 className="qty">{ quantityValue }</h3>
    <div className="btn add-btn" onClick={() => onQtyChange('+')}>
      +
    </div>
  </div>
}


const SalesPanel = () => {
  return <PageWrapper title="销售面板">
    <div className="sales-panel__container">
      <div className="panel__left">
        <h3 className="title">
          桌台：K33100
          <div className="tag-wrap">
            <span className="tag rule-tag">固定计费</span>
            <span className="tag user-qty-tag">3人</span>
          </div>
        </h3>

        <div className="table__info">
          <div className="info-item">
            2025-06-23 10:30:30
          </div>
          <div className="info-item">
            4人
          </div>
          <div className="info-item">
            固定小时套餐（12:00 - 18:00）
          </div>
          <div className="info-item">
            ￥200.00
          </div>
        </div>

        <div className="panel__content">
          <h3 className="product-title">
            商品清单
            <span className="total-size">15件商品</span>
          </h3>
          <ul className="product-list">
            <li className="product-item">
              <span className="serial-number">1</span>
              <div className="image-box">
                <img className="image" src="https://img.yanjiuhome.com/litpic/litpic_3148.jpg" alt="" />
              </div>
              <div className="right">
                <h4 className="product-name">苦荞茶</h4>
                <p className="unit-price">￥20/杯</p>
                <ProductQuantityControlButton />
              </div>
            </li>
            <li className="product-item">
              <span className="serial-number">2</span>
              <div className="image-box">
                <img className="image" src="https://img.yanjiuhome.com/litpic/litpic_3148.jpg" alt="" />
              </div>
              <div className="right">
                <h4 className="product-name">苦荞茶</h4>
                <p className="unit-price">￥20/杯</p>
                <ProductQuantityControlButton />
              </div>
            </li>
            <li className="product-item">
              <div className="image-box">
                <img className="image" src="https://img.yanjiuhome.com/litpic/litpic_3148.jpg" alt="" />
              </div>
              <div className="right">
                <h4 className="product-name">苦荞茶</h4>
                <p className="unit-price">￥20/杯</p>
                <ProductQuantityControlButton />
              </div>
            </li>
          </ul>
        </div>

        {/* 底部 */}
        <div className="panel__footer">
          <div className="total-price">
            ￥200.00
            <span className="discount__price">优惠：10元</span>
          </div>
          <button className="pay-btn">结算</button>
        </div>
      </div>

      {/* <div className="panel__middle">
        中间
      </div> */}


      <div className="panel__right">
        <div className="category">
          <ul className="category-list">
            <li className="category-list__item is-active">全部</li>
            <li className="category-list__item">茶水</li>
            <li className="category-list__item">烟</li>
            <li className="category-list__item">小吃</li>
            <li className="category-list__item">饮料</li>
          </ul>
          <div className="search-box">
            <input type="text" placeholder="请输入商品关键字搜索" />
            {/* <SearchIcon /> */}
            <div className="search-icon">
              <IconFont name="sousuo" size="22px" />
            </div>
          </div>
        </div>

        {/* 排序 */}
        {/* <div className="sort-bar">
          <div className="sort-item">销量</div>
          <div className="sort-item">库存</div>
        </div> */}

        {/* 商品 */}
        <div className="products">
          <div className="product-list">
            <ul className="product-list__inner">
              {
                Array(50).fill(null).map(() => {
                  return <li className="product-list__item">
                    <div className="image-box">
                      <img className="image" src="https://img.yanjiuhome.com/litpic/litpic_4705.jpg" alt="" />
                    </div>
                    <div className="product-info">
                      <div className="cart-qty-tag">3</div>
                      <h3 className="name">南京（细支）</h3>
                      <h4 className="price">200元/ <span className="price-unit">杯</span></h4>
                      <h5 className="inventory-qty">库存：30</h5>
                      {/* <p className="sales-qty">销量：300</p> */}
                      {/* 数量控制按钮 */}
                      {/* <ProductQuantityControlButton></ProductQuantityControlButton> */}
                    </div>
                  </li>
                })
              }
            </ul>
          </div>
          <div className="product-list__pager">
            <span className="total-size">总共：30条</span>
            <div className="page-control__wrap">
              <div className="page-item">
                <IconFont name="left" size="18px" />
              </div>
              <div className="page">1/3</div>
              <div className="page-item">
                <IconFont name="right" size="18px" />
              </div>
            </div>
          </div>

          {/* 追加商品 */}
          <div className="append-product">
            <h3 className="title">加购商品</h3>
            <div className="append-product__wrap">
              <ul className="product-list">
                <li className="product__item">
                  <img className="image" src="https://img.yanjiuhome.com/litpic/litpic_4705.jpg" alt="" />
                  <h3 className="name">南京x2</h3>
                </li>
                <li className="product__item">
                  <img className="image" src="https://img.yanjiuhome.com/litpic/litpic_4705.jpg" alt="" />
                  <h3 className="name">南京x2</h3>
                </li>
              </ul>

              <div className="confirm-button">
                <button className="btn">取消</button>
                <button className="btn confirm">确认</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </PageWrapper>;
}

export default SalesPanel;